<template>
  <div class="home">
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <div v-if="false">
       <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="用户名">
        <el-input v-model="form.username" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.password" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="pressSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- {{state.aaa}} -->
    <el-button type="primary" @click="pressChange">改变store数据</el-button>
    </div>

    <div class="banner row jcc aic">
      <div class="search-desktop">
      </div>
    </div>

    <div class="newest-position">
      <div class="topo-head row aic">
        <div class="title">最新招聘</div>
        <i class="iconfont icon-zuixin-" style="color: red;"></i>
      </div>

      <div class="message-list">
        <NoneAbout :list="recruitmentMsg.rows" text="职位"></NoneAbout>
        <el-row :gutter="20">
          <el-col :span="8" v-for="item in recruitmentMsg.rows && recruitmentMsg.rows" :key="item.id">
            <el-card shadow="hover">
              <div class="recruitment-msg cursor" @click="toDetail(item.jobId)">
                <div class="title row aic">
                  <p class="flex-grow-1">{{item.posName}}</p>
                  <div>{{item.salary}}</div>
                </div>
                <div class="label">
                  <span>{{item.posArea}}</span>
                  <span v-if="item.experience==0">工作经验不限</span>
                  <span v-if="item.experience!==0">工作经验{{item.experience}}年</span>
                  <span v-if="item.education == 0">小学</span>
                  <span v-if="item.education == 1">初中</span>
                  <span v-if="item.education == 2">高中</span>
                  <span v-if="item.education == 3">大专</span>
                  <span v-if="item.education == 4">本科</span>
                  <span v-if="item.education == 5">硕士</span>
                  <span v-if="item.education == 6">博士</span>
                  <span v-if="item.education == 7">学历不限</span>
                </div>
                <div class="position">{{item.address}}</div>
                <div class="company">{{item.posNature}} | {{item.level}}</div>
              </div>
            </el-card>
          </el-col>
        </el-row>
         
      </div>
    </div>
    
    <div class="network-recruitment">
      <div class="topo-head row aic">
        <div class="title">网络招聘会</div>
        <i class="iconfont icon-earth" style="color: red; font-size: 18px;"></i>
      </div>

       <div class="message-list">
         <NoneAbout :list="jobFairMessage.rows" text="招聘会"></NoneAbout>
        <el-row :gutter="20">
          <el-col :span="6" v-for="item in jobFairMessage.rows && jobFairMessage.rows" :key="item.id">
            <!-- <el-card shadow="hover">
              
              <div class="recruitment-msg">
                <img src="https://element.eleme.io/static/hamburger.50e4091.png" class="image">
                <div class="job-fair-message row aic">
                  <div class="flex-grow-1">
                    <div class="title">{{item.jobFairName}}</div>
                    <div class="time">时间：{{item.startTime}} 至 {{item.endTime}}</div>
                  </div>
                  <el-button style="height: 33px;" type="primary" size="small">进入会场</el-button>
                </div>
              </div>
            </el-card> -->
            <JobFair :item="item"></JobFair>
          </el-col>
        </el-row>
        
      </div>
    </div>
   
  </div>
</template>

<script>
import JobFair from '@/components/JobFair.vue'
import sock from '@/common/socket';
import NoneAbout from '@/components/NoneAbout.vue'

export default {
  name: 'home',
  data(){
    return {
      form: {
        username: '',
        password: '',
      },
    }
  },
  computed: {
    recruitmentMsg () {
      return this.$store.state.home.recruitmentMsg
    },
    jobFairMessage(){
      return this.$store.state.home.jobFairMessage
    }  
  },
  created() {
    // sock.on("result", result => {
    //   this.result = result;
    // });
    // setInterval(() => {
    //   this.a = Math.floor(Math.random() * 100000);
    //   this.b = Math.floor(Math.random() * 100000);

    //   sock.emit("test", this.a, this.b);
    // }, 500);
    
  },
  mounted(){
    this.getPositionList();
    this.getjobFairList();
    
  },
  methods: {
    getPositionList(){
      let _data = {pageSize: 6, pageNumber: 1, type: 1, keyword: '',auditStatus: "1",
          display: "1", param3: localStorage.getItem("city")? localStorage.getItem("city") :this.$store.state.home.city}
      this.$store.dispatch('getPositionList',_data)
    },

    getjobFairList(){
      let _data = {pageSize: 8, pageNumber: 1, keyword:'', status: ['1', '2'], param3: localStorage.getItem("city")? localStorage.getItem("city") :this.$store.state.home.city }
      this.$store.dispatch('getjobFairList',_data)
      
    },

    pressSubmit(){
      console.log(this.$store,this.state)
      this.$store.dispatch('login',this.form)
    },

    pressChange(){
      this.$store.dispatch('loadArr',Math.random())
    },

    toDetail(id){
      console.log(id)
      this.$router.push({path: `/position/${id}`})
    }
  },
  components:{
    JobFair,
    NoneAbout,
  }
}
</script>

<style lang="less">
.home {
  .banner {
    width: 100%;
    height: 400px;
    background: url("../assets/home/index_top_bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }

  .newest-position {
    width: 1200px;
    margin: 0 auto;

    .el-card {
      margin-bottom: 20px;
    }
  }
  .topo-head {
    padding: 15px 0;
    .iconfont {
      font-size: 25px;
      
    }
    .title {
      line-height: 1;
      padding-left: 10px;
      border-left: 3px solid #409EFF;
    }
  }

  .message-list {
    .cursor{ cursor: pointer; }
    .recruitment-msg {
      .image{ width: 100%; height: 165px; }
      .title {
        p {
          font-size: 16px;
        }
        div {
          color: red;
        }
      }

      .label {
        color: #999;
        padding: 15px 0;
        font-size: 13px;
        border-bottom: 1px solid #eee;
        span { margin-right: 20px; }
      }
      
      .position {
        color: #999;
        font-size: 13px;
        margin: 5px 0;
        margin-top: 10px;
      }

      .company {
        color: #999;
        font-size: 13px;
      }

      .job-fair-message {
        .title{
          font-size: 14px;
          margin-bottom: 5px;
        }

        .time{
          font-size: 13px;
          color: #999;
        }
      }
    }
  }

  .network-recruitment {
    width: 1200px;
    margin: 0 auto;
    .el-card {
      margin-bottom: 20px;
    }
  }
}
</style>

